<script lang="ts" setup name="TenantNameIconModal">
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { TAlignment, TArrange, TElement } from './dict'
import { useHttpUrl } from '@/global/hooks/use-app'
import { tenantApi } from '@/MainApp/apis/tenant'
import './tenant.scss'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  formKey: {
    type: Object,
    default: () => {}
  },
  editData: {
    type: Object,
    default: () => null
  }
})
const emits = defineEmits<{
  (e: 'update:visible', bool: boolean): void
  (e: 'dataChange'): void
}>()
const { t } = useConfig()
const { msgError, msgSuccess } = useMessage()
const { lenShort } = useLength()
const { VITE_APP_DOWNLOAD_URL } = import.meta.env
const dVisible = ref(false)

// 新增、修改
const fileList = ref([])
const tenantState = reactive({
  title: '新增租户',
  loading: false,
  form: {
    alignment: 'LEFT',
    arrange: '',
    element: 'ICON_NAME',
    icon: '',
    name: '',
    favicon: '',
    iconClose: '',
    iconOpen: '',
    faviconName: ''
  }
})

const handleClose = () => {
  emits('update:visible', false)
  dVisible.value = false
  tenantState.loading = false
  tenantState.form = {
    alignment: 'LEFT',
    arrange: '',
    element: 'ICON_NAME',
    icon: '',
    name: '',
    favicon: '',
    iconClose: '',
    iconOpen: '',
    faviconName: ''
  }
}
const handConfirm = async () => {
  tenantState.loading = true
  const { msg, success } = await tenantApi.updateTenant({
    id: props.editData,
    ...tenantState.form
  })
  if (success) {
    handleClose()
    msgSuccess(msg)
    emits('dataChange')
  }
  else {
    msgError(msg)
  }

  tenantState.loading = false
}
watch(
  () => props.visible,
  (bool: boolean) => {
    dVisible.value = bool
    if (bool && props.editData) {
      tenantState.form = { ...props.editData } as any
      tenantState.title = '名称和图标'
      tenantState.form.name = props.editData.name || props.editData.name
      fileList.value = props.editData.favicon
        ? [
            {
              name: props.editData.faviconName,
              url: VITE_APP_DOWNLOAD_URL + props.editData.favicon
            } as never
          ]
        : []
    }
    else {
      fileList.value = []
    }
  }
)
const handIconOpenSuccess = async (res: any, str: string) => {
  if (res?.success) {
    switch (str) {
      case 'iconOpen':
        tenantState.form.iconOpen = res?.data?.id
        break
      case 'iconClose':
        tenantState.form.iconClose = res?.data?.id
        break
      case 'favicon':
        tenantState.form.favicon = res?.data?.id
        tenantState.form.faviconName = res?.data?.originName
        fileList.value = [
          {
            name: res?.data?.originName,
            url: VITE_APP_DOWNLOAD_URL + res?.data?.id
          } as never
        ]
        break
    }
  }
}
</script>

<template>
  <el-dialog
    v-model="dVisible"
    :title="tenantState.title"
    class="tenant-design"
    width="1200px"
    draggable
    align-center
    :close-on-click-modal="false"
    @closed="handleClose"
  >
    <el-row>
      <el-col :span="24" class="top-text"> 左侧菜单展开 </el-col>
      <el-col :span="24" class="cen-text"> 元素 </el-col>
      <el-col :span="24">
        <el-radio-group v-model="tenantState.form.element" size="large">
          <el-radio
            v-for="(item, index) in TElement"
            :key="index"
            :label="item.label"
          >
            <div class="radio-cen">
              <span>{{ item.name }}</span>
              <div class="radio-icon">
                <el-icon v-show="item.label !== 'NAME'" class="radio-text">
                  <IkSvgIcon name="logo" />
                </el-icon>
                <span v-show="item.label !== 'ICON'" class="radio-span">
                  金合技术中台
                </span>
              </div>
            </div>
          </el-radio>
        </el-radio-group>
      </el-col>
      <el-col v-show="tenantState.form.element === 'ICON_NAME'" :span="24" class="cen-text"> 排列方式 </el-col>
      <el-col v-show="tenantState.form.element === 'ICON_NAME'" :span="24">
        <el-radio-group v-model="tenantState.form.arrange" size="large">
          <el-radio :label="TArrange[0].label">
            <div class="radio-cen">
              <span>{{ TArrange[0].name }}</span>
              <div class="radio-icon">
                <el-icon class="radio-text">
                  <IkSvgIcon name="logo" />
                </el-icon>
                <span class="radio-span"> 金合技术中台 </span>
              </div>
            </div>
          </el-radio>
          <el-radio :label="TArrange[1].label">
            <div class="radio-cen">
              <span>{{ TArrange[1].name }}</span>
              <div class="radio-icon">
                <span class="radio-span radio-text"> 金合技术中台 </span>
                <el-icon class="radio-text">
                  <IkSvgIcon name="logo" />
                </el-icon>
              </div>
            </div>
          </el-radio>
        </el-radio-group>
      </el-col>
      <el-col :span="24" class="cen-text"> 水平对齐方式 </el-col>
      <el-col :span="24">
        <el-radio-group v-model="tenantState.form.alignment" size="large">
          <el-radio
            v-for="(item, index) in TAlignment"
            :key="index"
            :label="item.label"
          >
            <div class="radio-cen">
              <span>{{ item.name }}</span>
              <div :class="item.class">
                <el-icon v-show="tenantState.form.element !== 'NAME'" class="radio-text">
                  <IkSvgIcon name="logo" />
                </el-icon>
                <span v-show="tenantState.form.element !== 'ICON'" class="radio-span">
                  金合技术中台
                </span>
              </div>
            </div>
          </el-radio>
        </el-radio-group>
      </el-col>
      <el-col :span="24" class="cen-text">
        图标（图标最大显示为32*32px）
      </el-col>
      <el-col :span="24">
        <IkImageUpload
          v-model:url="tenantState.form.iconOpen"
          :width="32"
          :height="32"
        />
      </el-col>
      <el-col :span="24" class="cen-text">
        系统名称（默认为租户名称，可修改，建议名称在8个字内）
      </el-col>
      <el-col :span="12">
        <el-input
          v-model.trim="tenantState.form.name"
          clearable
          :maxlength="lenShort"
          show-word-limit
          placeholder="请输入系统名称"
        />
      </el-col>
      <el-col :span="24" class="top-text mt15"> 左侧菜单收起 </el-col>
      <el-col :span="24" class="cen-text">
        左侧菜单收起后，仅支持图标展示，图标最大显示为32*32px
      </el-col>
      <el-col :span="24">
        <IkImageUpload
          v-model:url="tenantState.form.iconClose"
          :width="32"
          :height="32"
        />
      </el-col>
      <el-col :span="24" class="top-text mt15"> 浏览器页签图标 </el-col>
      <el-col :span="24" class="cen-text"> 图标（请上传.ico文件） </el-col>
      <el-col :span="24">
        <el-upload
          ref="upload"
          v-model:file-list="fileList"
          class="upload-demo"
          :action="`${useHttpUrl().baseUrl}/server/oss/upload`"
          :limit="1"
          :auto-upload="true"
          accept=".ico"
          :on-success="
            (res: any) => {
              handIconOpenSuccess(res, 'favicon')
            }
          "
        >
          <template #trigger>
            <el-button type="primary" :icon="Plus">上传文件</el-button>
          </template>
          <template #tip>
            <div class="el-upload__tip text-red">
              只能上传一个文件，新的文件会覆盖之前的文件
            </div>
          </template>
        </el-upload>
      </el-col>
    </el-row>

    <template #footer>
      <el-button @click="handleClose">
        {{ t('action.cancel') }}
      </el-button>
      <el-button
        type="primary"
        :loading="tenantState.loading"
        @click="handConfirm"
      >
        {{ t('action.sure') }}
      </el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.tenant-design {
  display: flex;
  flex-direction: column;

  .el-radio-group{
    margin-bottom: 20px;
  }

  .top-text {
    font-weight: 650;
    font-style: normal;
    font-size: 16px;
  }

  .cen-text {
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    padding-top: 15px;

    &:not(:first-child){
      margin-top: 20px;
    }
  }

  .mt15 {
    margin-top: 15px;
  }

  .radio-cen {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    top: 20px;
    position: relative;

    .radio-center {
      justify-content: center !important;
    }

    .radio-right {
      justify-content: flex-end !important;
    }

    .radio-icon {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      background-color: black;
      width: 208px;
      height: 40px;
      font-size: 18px;
      font-weight: 500;

      .radio-text {
        margin-right: 15px;
      }

      .radio-span {
        color: #fff;
      }
    }
  }
}
</style>
